<template>
  <el-dialog :visible.sync="value" :before-close="() => $emit('input', false)">
    <template slot="title">
      确认批量补单申请
    </template>
     <el-table
      border
      @selection-change="handleSelectionChange"
      :data="rowData" v-loading="loading" element-loading-text="加载中..." class="el-table-align-center">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
       <el-table-column label="充值时间" width="120" align="center">
         <template slot-scope="{row}">
           <div>{{row.createDate | toTime}}</div>
         </template>
       </el-table-column>
       <el-table-column label="充值单号" width="120" align="center">
         <template slot-scope="{row}">
           <div>{{row.orderId}}</div>
         </template>
       </el-table-column>
       <el-table-column label="第三方充值单号" width="120" align="center">
         <template slot-scope="{row}">
           <div>{{row.thirdOrderId}}</div>
         </template>
       </el-table-column>

      <el-table-column label="账户名" prop="username"  align="center">
      </el-table-column>
      <el-table-column label="存款金额" prop="amount"  align="center">
         <template slot-scope="{row}">
          {{row.amount | currency}}
        </template>
      </el-table-column>
      <el-table-column label="补单金额" prop="username" align="center">
         <template slot-scope="{row}">
          {{(row.amount - row.fee) | currency}}
        </template>
      </el-table-column>
    </el-table>
     <el-form
    ref="refForm"
    :rules="rules"
    :disabled="loading"
    :model="form" class="demo-form-inline">
     <el-form-item prop="remark">
      <el-col :span="24">
        <slot name="label">
          <div class="label">备注</div>
        </slot>
        <el-input type="textarea" placeholder="请填写备注" rows="3" v-model="form.remark" @keyup.enter.native="doSave({action: 'saveForm', form: 'refForm'})">
        </el-input>
      </el-col>
    </el-form-item>
    <el-tip>温馨提示：批量补单只对今日（自然天）的充值单，进行补单操作。若是超出今日的的充值单，则不在批量补单范围内.</el-tip>
    </el-form>
     <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('input', false)" :loading="loading" >取 消</el-button>
      <el-button type="primary" :loading="loading"  @click="doSave({action: 'saveForm', form: 'refForm'})">确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>

// services
import { applyReorder } from '@/services/api/recharge';

// mixins
import { form } from '@/build';

export default {
  name: 'confirm-multiple-dialog',
  props: ['value', 'rowData'],
  mixins: [form],
  data() {
    return {
      form: {
        remark: '',
        orderId: '',
      },
      tableData: [],
      multipleSelection: [],
      rules: {
        remark: [
          { required: true, message: '调整理由不能为空' },
        ],
      },
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
      const orderId = [];
      this.multipleSelection.forEach((item) => {
        orderId.push(item.orderId);
      });
      this.form.orderId = orderId.join(',');
    },
  },
  mounted() {
    this.bindSave(applyReorder, 'saveForm', 'form', {
      beforeSend: () => this.form,
      afterSuccess: () => {
        this.$emit('input', false);
        this.$parent.gridSearch();
      },
    });
  },
};
</script>

<style scoped>
</style>
